<template>
	<view>
		<map style="width: 100%;height:30vh;" :longitude="lng" :latitude="lat"
			:show-location="true"
			:polygons="polygons" :markers="markerList" @tap="markerClick" @markertap="tapmarker">
		</map>
		<view style="width: 100%;height:30vh;" class="" @click="sure()">
			确定
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			// 经度
			longitude: {
				type: String,
			},
			// 纬度
			latitude: {
				type: String,
			},
			
		},
		data() {
			return {
				lng : this.longitude,// 经度
				lat : this.latitude,// 纬度
				screenHeight: '400px',
				markerList: [],
				polygons: [{
					//多边形的坐标数组
					points: [],
					fillColor: "#cbdde9", //填充颜色
					strokeColor: "#78addd", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				}],
				markers: [],
			}
		},
		onReady() {
			console.log("onReady")
			console.log(this.longitude)
			console.log(this.latitude)
			
			const point = [114.5220646789641,35.5772365272644]; // 这是一个经纬度点
		},
		onShow() {
			console.log("onShow")
			console.log(this.longitude)
			console.log(this.latitude)
			
			// this.lng = 114.5220096635651
			// this.lat = 35.5772653278178
		},
		methods: {
			//标记点触发方法
			markerClick(e) {
				var longitude = e.detail.longitude
				var latitude = e.detail.latitude
				this.markers.push({
					"latitude": latitude,
					"longitude": longitude
				})
				
				
				var id = latitude+longitude
				this.markerList.push({
					"id": id,
					"longitude": longitude,
					"latitude": latitude,
					// "iconPath": '../../static/logo.png',
					"iconPath": 'https://hellouniapp.dcloud.net.cn/static/location.png',
					"width": "60rpx",
					"height": "60rpx"
				})
				
				if(this.markers.length >= 3) {
					this.sure()
					//39.96054757699451   longitude: 116.44226174654261
					const result = this.isPointInPolygon(116.44226174654261, 39.96054757699451, this.polygons[0].points);
					console.log(result, "0000112220"); // 如果点在多边形内部，结果为true，否则为false
				}
				console.log(this.markers, this.markerList, "00000");
			},
			tapmarker(e) {
				console.log(e, "000001111");
			},
			sure() {
				this.polygons = [{
					//多边形的坐标数组
					points: this.markers,
					fillColor: "#cbdde9", //填充颜色
					strokeColor: "#78addd", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				}]
			},

			// 判断点是否在多边形范围内
			isPointInPolygon(lng, lat, polygon) {
				var cnt = 0;
				for (var i = 0; i < polygon.length; i++) {
					const g = lng;
					const t = lat;
					const p1g = polygon[i].longitude;
					const p1t = polygon[i].latitude;
					const p2g = polygon[i === polygon.length - 1 ? 0 : i + 1].longitude;
					const p2t = polygon[i === polygon.length - 1 ? 0 : i + 1].latitude;
					const ming = Math.min(p1g, p2g);
					const maxg = Math.max(p1g, p2g);
					const mint = Math.min(p1t, p2t);
					const maxt = Math.max(p1t, p2t);
					if ((mint <= t && t <= maxt && ming <= g) && (maxg <= g || (p2g + (p1g - p2g) * ((t - p2t) / (p1t -
							p2t)) < g))) {
						cnt++
					}
				}
				return cnt % 2 === 1;
			},


		}
	}
</script>

<style>

</style>
